<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        body{
            margin: auto;
            text-align: center;
        }
        .top{
            padding: 50px 0;
            text-align: center;
            background: #e9ecef;
            position: relative;
        }
        h2{
            font-size:40px;
            color: #212529;
        }
        .top p{
            color: #212529;
            position: absolute;
            top:120px;
            left: 640px;
        }
        .con{
            padding: 10px 30px;
            background: #078689;
            display: inline-block;
            border-radius: 5px;
        }
        .com{
            padding: 10px 30px;
            display: inline-block;
            border-radius: 5px;
        }

        .center{
            padding: 10px 80px;
            border: 1px solid #999;
            display: inline-block;
            border-radius: 5px;
            margin: 10px 275px;

        }
        textarea{
            height: 200px;
            width: 560px;
            margin: 10px 10px;
            border: 1px solid#999;
            font-size: 30px;
        }
        .bottom{
            padding: 20px 50px;
            background: #078689;
            display: inline-block;
            border-radius: 5px;
        }
        .aa{
            display: none;
        }
    </style>
</head>
<body>

<div class="top">
    <h2>翻译</h2>
    <p>中文互译</p>
</div>
<div class="box">
    <span class="con col">中文</span>
    <span class="com col">英文</span>
    <span class="center" onclick="switchLan()">互换</span>
    <span class="con col">英文</span>
    <span class="com col">中文</span>

    <form action="">
        <textarea id="one"></textarea>
        <textarea id="two"></textarea>
    </form>
    <span class="bottom" onclick="zhToEn()">翻译</span>
    <span class="bottom aa" onclick="enToZh()">翻译</span>
</div>


<script>
    //中文
    var zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
    //英语
    var en = ['do you know', 'June', 'One day', 'Monday', 'Yes', "Children's day"];

    var one = document.querySelector("#one");
    var two = document.querySelector("#two");

    var col = document.querySelectorAll('.col');
    var bom = document.querySelectorAll('.bottom');

    function zhToEn() {
        for(var j = 0;j<en.length;j++){
            if(one.value == zh[j]){
                two.value = en[j]
            }
        }
    }
    function enToZh() {
        for(var j = 0;j<zh.length;j++){
            if(one.value == en[j]){
                two.value = zh[j]
            }
        }
    }
    function switchLan(){
        for(var i =0;i<col.length;i++){
            if(col[i].className == 'con col'){
                col[i].className = 'com col';
            }else if(col[i].className == 'com col'){
                col[i].className = 'con col';
            }
        }
        for(var i =0;i<bom.length;i++){
            if(bom[i].className == 'bottom'){
                bom[i].className = 'bottom aa';
            }else if(bom[i].className == 'bottom aa'){
                bom[i].className = 'bottom';
            }
        }
    }

</script>
</body>
</html>